<template>
  <div class="_startSup">
    <div class="headImgCon">
      <img :src="headImg" alt />
    </div>
    <div class="detailCon">
      <div class="tip">{{goods.tip}}</div>
      <div class="goodsTitle">{{goods.title}}</div>
      <div class="seckillCon">
        <div class="seckillTitle">秒杀价</div>
        <div class="tableCell">
          <span class="seckillPrice">{{goods.seckillPrice}}</span>
          <span class="price">原价{{goods.price}}</span>
        </div>
      </div>
      <div class="goodsCount">
        已抢
        <span class="numColor">{{count.num}}</span>件，仅剩
        <span class="numColor">{{count.remain}}</span>件
      </div>
      <div class="blankLine"></div>
      <div class="decCon">
        <div class="decItem">
          <div class="title">型号：</div>
          <div class="dec">{{goods.title}}</div>
        </div>
        <div class="decItem">
          <div class="title">颜色：</div>
          <div class="dec">{{goods.color}}</div>
        </div>
        <div class="decItem">
          <div class="title">规格：</div>
          <div class="dec">{{goods.size}}</div>
        </div>
        <div class="decItem"></div>
        <div class="decItem">
          <div class="title">描述：</div>
          <div class="dec">{{goods.dec}}</div>
        </div>
      </div>
    </div>

    <div class="detailImgCon">
      <img class="detailImg" :src="detailImg" alt />
    </div>

    <sup-bottom-bar-layout
      :num="avListMy.length"
      :state="supState"
      @seckill-click="startClick"
      @sup-click="supClick"
      @sup-list-click="supListClick"
    ></sup-bottom-bar-layout>
  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
import headImg1 from "@/assets/切图/详情乳胶枕大人.jpg";
import headImg2 from "@/assets/切图/详情乳胶枕小孩.jpg";
import headImg3 from "@/assets/切图/详情万用毯.jpg";

import detailImg1 from "@/assets/直播助力产品-成人枕.jpg";
import detailImg2 from "@/assets/直播助力产品-儿童枕.jpg";
import detailImg3 from "@/assets/大号万用棉毯.jpg";

import { Popup, Slider, Button, Dialog } from "vant";
import SupBottomBarLayout from "@/components/SupBottomBarLayout";
import { utf16toEntities, uncodeUtf16 } from "@/js/utils";
export default {
  components: {
    [Popup.name]: Popup,
    [Slider.name]: Slider,
    [Button.name]: Button,
    SupBottomBarLayout
  },
  data() {
    return {
      headImg: "",
      detailImg: "",
      gid: 0,
      popupVisible: false,
      imgLoad: false,
      supState: 1,
      count: {
        num: 0,
        remain: 0
      },
      goods: {
        title: "禾风间成人乳胶枕",
        price: "￥399",
        seckillPrice: "￥0.01",
        color: "无",
        size: "无",
        dec: "线上拍付，进店领取",
        tip:
          "需活动期间下定并消费满1800元，并2020年11月31前签订交齐尾款方可参与。"
      }
    };
  },
  computed: {
    supCount() {
      return this.$store.state.activity.supCount;
    },
    supInfoMy() {
      return this.$store.state.activity.supInfoMy;
    },
    avListMy() {
      return this.$store.state.activity.avListMy;
    }
  },
  watch: {
    supInfoMy: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val && val.asOpenid) {
          this.supState = 2;
        }
      }
    },
    supCount: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val && val.browseCount) {
          this.$nextTick(() => {
            this.count.num = val[`goods${this.gid}Purchase`] || 0;
            this.count.remain = val[`goods${this.gid}Remain`] || 0;
          });
        }
      }
    }
  },
  created() {
    console.log(this.$route.query.gid);
    if (this.$route.query.gid) {
      let p = parseInt(this.$route.query.gid);
      this.gid = p;
      switch (p) {
        case 1: {
          this.headImg = headImg1;
          this.detailImg = detailImg1;
          this.goods = {
            title: "禾风间成人乳胶枕",
            price: "￥399",
            seckillPrice: "￥0.01",
            color: "无",
            size: "无",
            dec: "线上拍付，进店领取",
            tip:
              "需活动期间下定并消费满1800元，并2020年11月31前签订交齐尾款方可参与。"
          };
          break;
        }
        case 2: {
          this.headImg = headImg2;
          this.detailImg = detailImg2;
          this.goods = {
            title: "禾风间儿童乳胶枕",
            price: "￥219",
            seckillPrice: "￥0.01",
            color: "无",
            size: "无",
            dec: "线上拍付，进店领取",
            tip:
              "需活动期间下定并消费满1800元，并2020年11月31前签订交齐尾款方可参与。"
          };
          break;
        }
        case 3: {
          this.headImg = headImg3;
          this.detailImg = detailImg3;
          this.goods = {
            title: "禾风间大号万用棉毯",
            price: "￥159",
            seckillPrice: "￥0.01",
            color: "无",
            size: "无",
            dec: "线上拍付，进店领取",
            tip:
              "需活动期间下定并消费满1200元，并2020年11月31前签订交齐尾款方可参与。"
          };
          break;
        }
      }
      this.$forceUpdate();
    }
  },
  methods: {
    ...mapActions({
      startSup: "activity/startSup",
      updateShareAndSup: "activity/updateShareAndSup"
    }),
    ...mapMutations({
      setSupInfoMy: "activity/setSupInfoMy"
    }),
    startClick() {
      if (
        this.$store.state.activity.enrollInfo &&
        this.$store.state.activity.enrollInfo.id
      ) {
        let info = this.$store.state.activity.enrollInfo;
        let sendData = {
          asMobile: info.phone,
          asName: info.userName,
          asAddress: info.address,
          acId: 1,
          asOpenId: this.$store.state.userId,
          asProductId: this.gid,
          helperInfo: utf16toEntities(JSON.stringify(this.$store.state.userInfo))
        };
        if (this.$store.state.shareParams.shareId) {
          this.startSup(sendData)
            .then(res => {
              console.log(res);
              if (res.code == "000000") {
                let srAsId = res.data.id;
                this.setSupInfoMy({ asOpenid: res.data.asOpenid, ...res.data });
                return this.updateShareAndSup({
                  shareId: this.$store.state.shareParams.shareId,
                  assistId: res.data.id
                });
              } else {
                return { msg: res.msg };
              }
            })
            .then(res => {
              console.log(res);
              if (res && res.code == "000000") {
                Dialog.alert({ message: "发起助力成功" }).then(() => {});
              } else {
                Dialog.alert({
                  title: "出错了~",
                  message: res.msg
                });
              }
            })
            .catch(err => {
              this.hideLoading();
              console.log(err);
            });
        } else {
          Dialog.alert({
            message: "获取分享信息失败，请重新打开页面"
          });
        }
      } else {
        this.$router.push({
          name: "fillMsg",
          query: {
            ...this.$route.query
          }
        });
      }
    },
    shopImgClick() {
      this.popupVisible = true;
    },
    imgLoaded(e) {
      this.imgLoad = true;
    },
    imgError(e) {
      Dialog({ message: "商品图片加载失败" });
    },
    supClick() {
      Dialog.alert({
        title: "温馨提示",
        message: "请于页面右上角分享助力链接~"
      });
    },
    supListClick() {
      this.$router.push({
        name: "supList",
        query: {
          ...this.$route.query
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
._startSup {
  background-color: white;
  position: relative;
  .headImgCon {
    width: 100vw;
    img {
      width: 100%;
      display: block;
    }
  }
  .blankLine {
    height: 2px;
    background: #eee;
  }
  .detailCon {
    background-color: white;
    padding: 20px;
    .tip {
      font-size: 16px;
      color: red;
      margin-bottom: 8px;
    }
    .goodsTitle {
      font-size: 30px;
      color: #2b2b2b;
    }
    .seckillCon {
      margin-top: 20px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      color: #fff;
      font-size: 22px;
      .seckillTitle {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        background: #e02600;
        margin: 0;
        padding: 3px;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 6px;
        min-width: 88px;
        box-sizing: border-box;
      }
      .tableCell {
        display: table-cell;
        vertical-align: bottom;
        padding-left: 5px;
      }
      .seckillPrice {
        font-weight: 700;
        font-size: 36px;
        color: #e02600;
      }
      .price {
        font-weight: 400;
        color: #bbb;
        font-size: 16px;
        font-style: normal;
        text-decoration: line-through;
        padding-left: 7px;
      }
    }
    .goodsCount {
      margin: 20px 0 30px 0;
      color: #828282;
      font-size: 0.12rem;
      .numColor {
        color: $font-color-primary;
      }
    }
    .decCon {
      display: flex;
      flex-wrap: wrap;
      padding-top: 30px;
      padding-bottom: 40px;
      .decItem {
        display: flex;
        align-items: center;
        font-size: 20px;
        width: 50%;
        padding-bottom: 10px;
        .title {
          width: 25%;
          color: #767676;
        }
        .dec {
          font-weight: 700;
        }
      }
    }
  }
  .detailImgCon {
    padding: 30px 35px;
    background: #051f2e;
    box-sizing: border-box;
    .detailImg {
      width: 100%;
      display: block;
    }
  }
}
</style>